<template>

  <el-form :model="form" label-width="auto" style="max-width: 600px" :inline="true">
    <el-form-item label="用户名">
      <el-input v-model="form.usernamername"/>
    </el-form-item>


    <el-form-item>
      <el-button type="primary" @click="onSubmit">搜索</el-button>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="toAdd">添加</el-button>
    </el-form-item>
  </el-form>


  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="constanttypecode" label="常数类别编码" width="180"/>
      <el-table-column prop="constanttypename" label="常数类别名称" width="180"/>

      <el-table-column label="操作">
        <template #default="solt">
          <el-button link type="primary" size="small" @click="toEdit(solt)"> 编辑 :{{ solt.row.id }}</el-button>
          <el-button link type="primary" size="small" @click="removeById(solt.row.id)">删除</el-button>
        </template>

      </el-table-column>
    </el-table>
  </div>

  <!-- 添加表单 dialogFormVisible 表示是否显示，  boolean   -->
  <el-dialog v-model="editDialogFormVisible" title="添加常数类别" width="500">
    <el-form :model="editForm" label-width="auto">
      <el-form-item label="常数类别编码">
        <el-input v-model="editForm.constanttypecode"/>
      </el-form-item>
      <el-form-item label="常数类别名称">
        <el-input v-model="editForm.constanttypename"/>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="save">保存</el-button>
      </el-form-item>
    </el-form>


  </el-dialog>


</template>


<script setup>
import {onMounted, onUnmounted, ref} from 'vue'
import {ElNotification} from 'element-plus'
import axios from 'axios';
import {ElMessage, ElMessageBox} from 'element-plus'

import service from '@/utils/request'


//是否显示 dialog
let editDialogFormVisible = ref(false);

//用于接收表单内容的
let form = ref({})

// 修改表单
let editForm = ref({
  constanttypecode:'',
  constanttypename:''
})

//提交数据 到
function onSubmit() {
  console.log("form", form.value);

}

//表格的数据
let tableData = ref([])


function toAdd() {
  editDialogFormVisible.value = true;
}

function listData(){
  service.get( '/constanttype/list').then(({status,data}) =>{
    tableData.value = data
  })
}

function save() {
  //1 获取添加的表单信息

  console.log("editForm.value: ", editForm.value);


  service.post("/constanttype/saveOrUpdate",editForm.value).then(
      res =>{
        console.log(res.data)
    // 3  判断 请求结果，成功与否
    editDialogFormVisible.value = false;

    if (res.data) {
      // 给与用户反馈
      ElNotification({
        title: '提示',
        message: '保存成功!!!!!!!!!!!!!',
        type: 'success',
      })
      listData();
    } else {
      // 给与用户反馈
      ElNotification({
        title: '提示',
        message: '保存失败!!!!!!!!!!!!!',
        type: 'error',
      })
    }
  })

  //2 发送网络请求 到后端，


}


//待编辑
function toEdit({row}) {

  const id = row.id
  service.get('/constanttype/getById/'+id).then(({status, data}) => {
    //根据用户id ，查询当前待修改的数据
    console.log(data)
    editForm.value.id = data.id
    editForm.value.constanttypecode = data.constanttypecode
    editForm.value.constanttypename = data.constanttypename

    editDialogFormVisible.value = true;
  })


}


function removeById(id) {

  //确认是否删除
  ElMessageBox.confirm('是否确认删除?', 'Warning', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {


        service.get('/constanttype/deleteById/' + id).then(({status, data}) => {
          if (data) {
            // 给与用户反馈
            ElNotification({
              title: '提示',
              message: '删除成功!!!!!!!!!!!!!',
              type: 'success',
            })
            //查询最新的数据
            listData();
          } else {
            // 给与用户反馈
            ElNotification({
              title: '提示',
              message: '删除失败',
              type: 'error',
            })
          }
        })
      })


}


onMounted(() => {
  service.get("/constanttype/list").then(
      res => {
        // console.log(res)
        tableData.value=res.data;
      }
  )

})


// onUnmounted(()=>{
//     console.log("组件卸载成功")
// })


</script>